<template>
  <div class="member-pay-wrapper">
    <div class="member-pay-list">
      <div class="member-pay-details-content">
        <div class="header">
          <div class="header-img">
            <img src="/static/image/member_pay/member_pay_header.png" alt="">
          </div>
          <div class="vip-img">
            <img src="/static/image/member_pay/vip.png" alt="">
          </div>
          <div class="logo">
            <img src="/static/image/member_pay/logo.png" alt="">
          </div>
        </div>
        <!---->
        <div class="equities-wrapper">
          <div class="equities-list">
            <div class="equities-item">
              <div class="equitie-img">
                <img src="/static/image/member_pay/equities_1.png" alt="">
              </div>
              <div class="equities-content">
                <div class="equities-title">
                  权益一：专享折扣
                </div>
                <div class="equities-intro">
                  购买高端定制课程享有VIP会员专享折扣价
                </div>
              </div>
            </div>
            <div class="equities-item">
              <div class="equitie-img">
                <img src="/static/image/member_pay/equities_2.png" alt="">
              </div>
              <div class="equities-content">
                <div class="equities-title">
                  权益二：无限回看
                </div>
                <div class="equities-intro">
                  VIP会员在会员有效期内，可无限期观看学习的特权
                </div>
              </div>
            </div>
            <div class="equities-item">
              <div class="equitie-img">
                <img src="/static/image/member_pay/equities_3.png" alt="">
              </div>
              <div class="equities-content">
                <div class="equities-title">
                  权益三：线下辅导
                </div>
                <div class="equities-intro">
                  专属名师一对一提供线下辅导、互动、交流
                </div>
              </div>
            </div>
            <div class="equities-item">
              <div class="equitie-img">
                <img src="/static/image/member_pay/equities_4.png" alt="">
              </div>
              <div class="equities-content">
                <div class="equities-title">
                  权益四：专属客服
                </div>
                <div class="equities-intro">
                  尊享专属客服服务，急速响应
                </div>
              </div>
            </div>
            <div class="equities-item">
              <div class="equitie-img">
                <img src="/static/image/member_pay/equities_5.png" alt="">
              </div>
              <div class="equities-content">
                <div class="equities-title">
                  权益五：尊贵标识
                </div>
                <div class="equities-intro">
                  VIP会员拥有专属头像，彰显你的与众不同
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="purchase-note-wrapper">
          <div class="border-note">
            <div class="purchase-note">
              <div class="buy-title">
                <img src="/static/image/member_pay/buy_title.png" alt="">
              </div>
              <div class="buy-title-text">购买须知</div>
              <div class="buy-title-content">
                <ul class="buy-content-wrapper">
                  <li>会员有效期：购买之日起一年</li>
                  <li>课程更新时间：不定期更新，请密切关注小程序</li>
                  <li>本课程为虚拟产品,购买恕不接受退款</li>
                  <li>课程所有资料版权永久性归沃创公司所有</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="fixed-bottom">
        <div class="pay-money-font">¥ 365.00</div>
        <div class="pay-btn">立即付款</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "memberPayDetails"
  };
</script>

<style scoped lang="less">
  .member-pay-wrapper {
    position:relative;
  }
  .header {
    position:relative;
    padding-bottom:285rpx;
  }
  .header-img {
    width:100%;
    height: 285rpx;
    position:absolute;
    top:0;
    left:0;
    & > img {
      width:100%;
      height: 285rpx;
    }
  }
  .vip-img {
    width:121rpx;
    height:26rpx;
    position:absolute;
    top:128rpx;
    left:307rpx;
    & > img {
      width:121rpx;
      height:26rpx;
    }
  }
  .logo {
    width:407rpx;
    height:97rpx;
    position:absolute;
    top:185rpx;
    left:171rpx;
    & > img {
      width:407rpx;
      height:97rpx;
    }
  }
  /*权益*/
  .equities-wrapper {
    background-color:#0C0701
  }
  .equities-list {
    box-sizing:border-box;
    padding:0rpx 41rpx;
  }
  .equities-item {
    box-sizing:border-box;
    padding:20rpx 0rpx;
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    align-items:center;
    color:#F7D476;
  }
  .equitie-img {
    width:80rpx;
    height:80rpx;
    padding-right:27rpx;
    & > img {
      width:80rpx;
      height:80rpx;
    }
  }
  .equities-title {
    font-size:28rpx;
    font-weight:bold;
    line-height:36rpx;
    .no-wrap()
  }
  .equities-intro{
    font-size:24rpx;
    .no-wrap()
  }
  .equities-content {
    flex:1;
    width:540rpx;
  }
  /*购买须知*/
  .purchase-note-wrapper {
    box-sizing:border-box;
    padding:43rpx 40rpx 38rpx 40rpx;

    background-color:#fff;
    position: relative;
    margin-bottom:98rpx;
  }
  .border-note {
    width: 670rpx;
    height:370rpx;
    padding:2px;
    border: 1px  dashed  #333;
  }
  .purchase-note {
    width: 666rpx;
    height:365rpx;
    margin:0 auto;
    border: 1px  dashed  #333;
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  .buy-title {
    width:386rpx;
    height:7rpx;
    position:absolute;
    top:53rpx;
    left:139rpx;
    & > img {
      width:386rpx;
      height:7rpx;
    }
  }
  .buy-title-text {
    color:#F7D476;
    font-size:24rpx;
    position:absolute;
    top:60rpx;
    left:285rpx;
  }
  .buy-title-content {
    position:absolute;
    top:100rpx;
    left:55rpx;
  }
  .buy-content-wrapper {
    font-size:@font_size_24;
  }
  .buy-title-content ul li:before {
    font-size:@font_size_32;
    padding-right:12rpx;
    line-height:60rpx;
    content: '\02022';
  }
  /*.ordinal {*/
    /*display:inline-block;*/
    /*font-size:36rpx;*/
    /*color:#333;*/
  /*}*/





  .no-wrap() {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }


  .member-pay-title {
    font-size:32rpx;
    color:#333;
    font-weight:bold;
    background-color:#fff;
    padding:30rpx 26rpx 26rpx 26rpx;
  }
  .check-title {
    color:#333;
    font-size:28rpx;
    background-color:#fff;
    padding:0rpx 26rpx 26rpx 26rpx;
  }
  .pay-types-list {
    overflow:hidden;
    width:100%;
    background-color:#fff;
  }
  .pay-types-item {
    width:50%;
    height:406rpx;
    float:left;
    text-align:center;
    & > img {
      width:313rpx;
      height:406rpx;
    }
  }
  .checked-item {
    width:100%;
    box-sizing:border-box;
    padding:37rpx 26rpx;
    background-color:#fff;
    display:flex;
    justify-content: space-between;
    align-items:center;
    position:fixed;
    bottom:98rpx;
    right:0
  }

  .total-money {
    color:#FF5050;
    font-size:32rpx;
    font-weight:bold;
  }


  .fixed-bottom {
    width:100%;
    height:98rpx;
    line-height:98rpx;
    text-align:center;
    padding-left:44rpx;
    box-sizing:border-box;
    color:#54524C;
    background-color:#fff;
    display:flex;
    justify-content: space-between;
    align-items:center;
    font-size:32rpx;
    position:fixed;
    left:0;
    bottom:0;
  }
  .pay-btn {
    width:228rpx;
    height:102rpx;
    background-color:#F2D9A1;
  }
  .pay-money-font{
  font-size:42rpx;
  color:#FF5050;
  font-weight:bold
  }
</style>
